﻿@page
@model FytSoa.Web.Pages.FytAdmin.WeChat.MenuSelectMaterialModel
@{
    ViewData["Title"] = "微信管理-菜单关联素材";
    Layout = "~/Pages/FytAdmin/_Layout.cshtml";
}
<style>
    body {
        background-color: #f6f8f9;
    }
    .list-wall {
        padding: 0px;
        width:96.8%;
    }
    .list-wall .layui-main {
        padding: 15px;
        margin: 0 0px;
        width: 100%;
    }

    .layui-card-header {
        border-top: 1px solid #f1f1f1;
        border-bottom: none;
    }

    .card-head-r {
        float: right;
    }

        .card-head-r i {
            font-size: 20px;
            margin-left: 10px;
            cursor: pointer;
        }

    .layui-col-md3 {
        width: 290px;
        height: 290px;
        margin-right: 15px;
        float:left;
    }
    .layui-col-md3:nth-child(3n){margin-right:0px;}
    .layui-card-body a {
        display: block;
    }

        .layui-card-body a h5 {
            font-size: 16px;
            color: #353535;
        }

        .layui-card-body a p {
            padding-top: 12px;
            color: #9A9A9A;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .layui-card-body a i {
            width: 100%;
            height: auto;
            background-size: cover;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-color: #F6F8F9;
            padding-bottom: 56.25%;
            display: block;
            margin-top: 10px;
        }

        .layui-card-body a.cover-dark {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            position: absolute;
            text-align: center;
            color: #ffffff;
            cursor: pointer;
            font-size: 15px;
            display: none;
        }

    .layui-card-body:hover a.cover-dark {
        display: block;
    }

        .layui-card-body:hover a.cover-dark:after {
            content: " ";
            display: inline-block;
            vertical-align: middle;
            width: 0;
            height: 100%;
            overflow: hidden;
        }

    .mater-type-body {
        padding: 30px;
    }

        .mater-type-body .item {
            border: 1px solid #e7e7eb;
            padding: 20px 20px 0px 160px;
            height: 135px;
            position: relative;
            margin-bottom: 20px;
            cursor: pointer;
        }

            .mater-type-body .item:last-child {
                margin-bottom: 0px;
            }

            .mater-type-body .item img {
                position: absolute;
                width: 110px;
                height: 110px;
                border-radius: 100%;
                top: 20px;
                left: 25px;
            }

            .mater-type-body .item .text .title {
                font-size: 16px;
                margin: 20px 0;
            }

            .mater-type-body .item .text .state {
                color: #999;
            }

    .wxmater .layui-layer-title {
        background-color: #f8f8f8 !important;
    }
</style>
<div class="list-wall" id="scdrop">
    <div class="layui-main">
        <div class="layui-row">
            <div class="layui-col-md3" v-for="it in list" v-cloak>
                <div class="layui-card">
                    <div class="layui-card-body">
                        <a class="cover-dark" @@click="selectCur(it)"><span>选择素材</span></a>
                        <a href="#">
                            <h5 class="layui-elip">{{it.content.news_item[0].title}}</h5>
                            <i :style="'background-image:url('+it.content.news_item[0].thumb_url+')'"></i>
                            <p>{{it.content.news_item[0].digest}}</p>
                        </a>
                    </div>
                    <div class="layui-card-header">
                        {{it.content.create_time}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts{
    <script>

        var os, active, wxid = 0, wxm = new Vue({
            el: '#scdrop',
            data: {
                list: [],
                where: {
                    page: 0,
                    gzhid: 0
                },
            },
            methods: {
                selectCur: function (m) { //m.media_id
                    parent.saveMaterial(m);
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                },
                
            }
        });
        layui.config({
            base: '/themes/js/modules/'
        }).use(['table', 'layer', 'jquery', 'common'],
            function () {
                var layer = layui.layer,
                    $ = layui.jquery;
                os = layui.common;
                var wxid = os.getUrlParam('gzhid');
                wxm.where.gzhid = wxid;
                active = {
                    Init: function () {
                        os.load();
                        os.ajax('api/wx/material/server', { id: parseInt(wxid) }, function (res) {
                            if (res.total_count !== 0) {                                
                                //console.log(wxm.list);
                                $.each(res.item, function (i, item) {
                                    var im = item.content.news_item[0].thumb_url;
                                    //console.log(im);
                                    var image = new Image();   
                                    image.src = im;
                                    image.onload = function () {
                                        var width = image.width;
                                        var height = image.height;
                                        //console.log(width + "------" + height);
                                        if (width == 140 && height==140) {
                                            if (im.indexOf('jpeg') > -1) {
                                                //console.log("存在Jpeg========"+im);
                                                item.content.news_item[0].thumb_url = im + "&wxfrom=5&wx_lazy=1";
                                            } else {
                                                //console.log("不存在Jpeg========" + im);
                                                item.content.news_item[0].thumb_url = im + "?wx_fmt=jpeg&wxfrom=5&wx_lazy=1";
                                            }
                                        }
                                    };
                                });
                                wxm.list = res.item;
                                //$.each(wxm.list, function (i, item) {
                                //    console.log(item.content.news_item[0].thumb_url);
                                //});
                            } else {
                                os.error(res.message);
                            }
                            os.loadClose();
                        });
                    },                    
                };
                active.Init();
            });
       
    </script>
}